<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:composition> 
        <p:panel  header="Buscador" style="text-align: center;margin-bottom:10px;">
            <h:form id="form">
                <p:dataTable var="item" value="#{backofficeItemManagedBean.allItems}" rowKey="#{item.idItem}" paginator="true" rows="10"  
                             selection="#{backofficeItemManagedBean.selectedItem}" selectionMode="single" filteredValue="#{backofficeItemManagedBean.filteredItems}" id="itemsTable">  

                    <p:ajax event="rowSelect" update=":form:display" oncomplete="itemDialog.show()"/>  

                    <p:column headerText="Ref." sortBy="#{item.idItem}" filterBy="#{item.idItem}" id="idItem" filterMatchMode="contains" style="text-align: center">  
                        #{item.idItem}  
                    </p:column>  

                    <p:column headerText="Nombre" sortBy="#{item.name}" filterBy="#{item.name}" id="name" filterMatchMode="contains">  
                        #{item.name}  
                    </p:column>  

                    <p:column headerText="Precio" sortBy="#{item.price}" filterBy="#{item.price}" id="price" filterMatchMode="contains" style="text-align: center">  
                        #{item.price} €
                    </p:column>  

                    <p:column headerText="Categoría" sortBy="#{item.idCategory.name}" filterBy="#{item.idCategory.name}" id="categoryName" filterMatchMode="contains" filterOptions="#{backofficeCategoryManagedBean.categoryList()}">  
                        #{item.idCategory.name}  
                    </p:column>  
                    <c:set value="#{utilsBean.itemStatusToString(item.status)}" var="stat"/>
                    <p:column headerText="Estado" sortBy="#{stat}" filterBy="#{stat}" id="status" filterOptions="#{utilsBean.itemStatusList()}"  
                              filterMatchMode="exact" style="text-align: center">  
                        #{stat}
                    </p:column>  

                </p:dataTable>  

                <p:dialog header="Detalles del artículo" widgetVar="itemDialog" resizable="false"  
                          width="380" showEffect="clip" hideEffect="explode">  

                    <h:panelGrid id="display" columns="2" cellpadding="4" >  

                        <h:outputText value="Referencia" />  
                        <h:outputText value="#{backofficeItemManagedBean.selectedItem.idItem}" id="aIdItem" style="font-weight: bold"/>  

                        <h:outputText value="Nombre" />  
                        <h:outputText value="#{backofficeItemManagedBean.selectedItem.name}" id="aName"  style="font-weight: bold"/>  


                        <h:outputText value="Precio" />  
                        <h:outputText value="#{backofficeItemManagedBean.selectedItem.price} €" id="aPrecio"  style="font-weight: bold"/>  

                        <h:outputText value="Categoría" />  
                        <h:outputText value="#{backofficeItemManagedBean.selectedItem.idCategory.name}" id="aCat"  style="font-weight: bold"/>  

                        <h:outputText value="Cagegoría padre" />  
                        <h:outputText value="#{backofficeItemManagedBean.selectedItem.idCategory.parentCategory.name}" id="aParentCat"  style="font-weight: bold"/>  


                        <h:outputText value="Fecha de registro" />  
                        <h:outputText value="#{utilsBean.formatDate(backofficeItemManagedBean.selectedItem.registrationDate)}" id="aDate"  style="font-weight: bold"/>  


                        <h:outputText value="Estado" />  
                        <c:set value="#{utilsBean.itemStatusToString(backofficeItemManagedBean.selectedItem.status)}" var="aStat"/>
                        <h:outputText value="#{aStat}" id="aStatus"  style="font-weight: bold"/>


                        <p:commandButton value="Cerrar" onclick="itemDialog.hide()"/>
                        <p:commandButton value="Ver" ajax="false" style="float: right" actionListener="#{backofficeItemManagedBean.viewItem(backofficeItemManagedBean.selectedItem)}"/>
                    </h:panelGrid>  
                </p:dialog>  
              
            </h:form>
        </p:panel>
    </ui:composition>

</html>
